<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 100%;
            height: 460px;
            display: flex;
            justify-content: center;
            /* justify-content: center 设置主轴居中 */
        }

        img {
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="container">
        <img src="images/01.jpg" />
        <img src="images/02.jpg" />
        <img src="images/03.jpg" />
        <img src="images/04.jpg" />
    </div>

    <script src='jquery-1.12.4.min.js'></script>
    <script>
        $(function () {
            let index = 0;  //定义下标控制img
            let play = null;
            function autoPlay() {
                index++;
                //控制index
                if(index == $('img').length) {
                    index = 0;
                }
                // show()元素显示  hide()元素隐藏  等同于display: block 和 none
                // siblings() 除了当前元素之外的其它兄弟节点
                // $('img').eq(index).show().siblings().hide();  // 链式写法 
                // $('img').eq(index).animate({"opacity": 1}, 1000).siblings().animate({"opacity": 0}, 1000);

                //fadeIn和fadeOut  元素从0 - 1  1 - 0  opacity: 1
                $('img').eq(index).fadeIn(1000).siblings().fadeOut(1000)
            }

            play = setInterval(autoPlay, 1000);

            //鼠标进入盒子的时候关闭自动轮播
            $('.container').mouseenter(function () {
                clearInterval(play);
            })
            //鼠标出去盒子的时候开启自动轮播
            $('.container').mouseleave(function () {
                play = setInterval(autoPlay, 1000);
            })
        })

    </script>
</body>

</html>